<template>
    <div class="main-container">
      是的防晒服的身份水电费水电费
        <div class="main-content">
            <component :is="currentView" :key="currentView" />
        </div> 
    <van-tabbar placeholder v-model="activeName" @change="tabSwitch" active-color="#16CE8A" unactive-color="#242424">
        <van-tabbar-item v-for="item in List" :key="item.name" :name="item.name" :value="item.name"
            :tab-title="item.title">
            <span> {{ item.title }}</span>
            <template #icon="props">
                <img :src="props.active ? item.active : item.unactive" alt="" />
            </template>
        </van-tabbar-item>
    </van-tabbar>
    </div>
</template>

<script setup>
import { ref, computed,markRaw  } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import tab_home_c from '@/assets/img/tab/tab_home_c.png'
import tab_home_r from '@/assets/img/tab/tab_home_r.png'
import tab_beian_c from '@/assets/img/tab/tab_beian_c.png'
import tab_beian_r from '@/assets/img/tab/tab_beian_r.png'
import tab_user_c from '@/assets/img/tab/tab_user_c.png'
import tab_user_r from '@/assets/img/tab/tab_user_r.png'

import HomeView from '@/views/home/HomeView.vue';
import MyView from '@/views/user/MyView.vue';
import ZJYPage from '@/views/zhuanjiyin/ZJYPage.vue';
import  activeTab from '@/store/tabstate.js'; 

const home = markRaw(HomeView) 
const my = markRaw(MyView)
const zjy = markRaw(ZJYPage)

const currentView = computed(() => {
    console.log("currentView",activeName.value);

    for (let index = 0; index < List.value.length; index++) {
        const item = List.value[index];
        // console.log('11111111', activeName.value);
        // console.log('111111112', item.view);
        if (activeName.value == item.name && item.view) {
            // console.log('11111111', activeName.value);
            return item.view
        }
    }
    return null;
});
const router = useRouter();

const route = useRoute();

const back = () => {
    // 
    if (window.history.length > 1) {
        router.back();
    } else {
        router.push({ path: '/' });
    }
}
// const activeName = computed(() => activeTab.tab);
// console.log('www',activeTab().maintab);

const activeName = ref(activeTab().maintab);

var List = ref([
    {
        name: 'home',
        title: '首页',
        active: tab_home_c,
        unactive: tab_home_r,
        view: home,
    },
    {
        name: 'beian',
        title: '溯源管理',
        active: tab_beian_c,
        unactive: tab_beian_r,
        view:zjy
    },
    {
        name: 'my',
        title: '我的',
        active: tab_user_c,
        unactive: tab_user_r,
        view:my,
    }
])
const tabSwitch = (item, index) => {
    // console.log('eeeeeeeee', item, index)
    activeTab().changeMainData(item)
}
</script>

<style lang="less" scoped>
.main-container {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #F3F9F8;
}

.main-footer {
    flex: 0 0 auto;
    text-align: center;
    padding: 0;
    min-height: 60px;
}

.main-content {
    flex: 1 1 auto;
    overflow: hidden;
}
</style>